<template>
  <div class="container">
    <!-- <div>
      <el-tabs v-model="activeTab" class="table-tabs" @tab-click="handleClick">
        <el-tab-pane label="酸轧2280" name="tcm2280"></el-tab-pane>
        <el-tab-pane label="连退1630" name="cal1630"></el-tab-pane>
        <el-tab-pane label="连退2150" name="cal2150"></el-tab-pane>
        <el-tab-pane label="镀锌1870" name="cgl1870"></el-tab-pane>
      </el-tabs>
    </div> -->
    <div class="sreach-header">
      <el-form :inline="true" :model="searchForm" class="header-form search-form">
        <el-form-item>
          <el-dropdown @command="handleCommand">
            <span class="el-dropdown-link">
              {{ curLine }}<el-icon class="el-icon--right"><arrow-down /></el-icon>
            </span>
            <template #dropdown>
              <el-dropdown-menu>
                <el-dropdown-item command="tcm2280">酸轧2280</el-dropdown-item>
                <el-dropdown-item command="cal1630">连退1630</el-dropdown-item>
                <el-dropdown-item command="cal2150">连退2150</el-dropdown-item>
                <el-dropdown-item command="cgl1870">镀锌1870</el-dropdown-item>
              </el-dropdown-menu>
            </template>
          </el-dropdown>
        </el-form-item>
        <el-form-item label="开始时间" class="time-period-picker">
          <el-date-picker v-model="searchForm.startDate" type="date" placeholder="开始时间" value-format="YYYY-MM-DD" />
        </el-form-item>
        <el-form-item label="结束时间" class="time-period-picker">
          <el-date-picker v-model="searchForm.endDate" type="date" placeholder="结束时间" value-format="YYYY-MM-DD" />
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="handleSearch">查询</el-button>
          <el-button @click="handleReset">重置</el-button>
        </el-form-item>
      </el-form>
    </div>
    <div class="main-container">
      <div class="table-container">
        <el-table
          :data="tableData"
          :header-cell-style="{
            background: '#083885',
            color: '#ddd',
            textAlign: 'center',
            border: '1px solid rgba(255,255,255,0.18)',
            borderBottom: '1px solid rgba(255,255,255,0.28)',
          }"
          :cell-style="{ textAlign: 'center' }"
          :span-method="spanFunc"
          border
        >
          <el-table-column prop="area" label="区域" />
          <el-table-column prop="techName" label="工艺项" />
          <el-table-column prop="lowLevel" label="下限值" />
          <el-table-column prop="highLevel" label="上限值" />
          <el-table-column prop="totalCount" label="统计卷数" />
          <el-table-column prop="failCount" label="参数不符卷数" />
          <el-table-column prop="rate" label="不合格率" />
        </el-table>
      </div>
      <div class="graph-container">
        <graph-bar-line :datax="graphData.x" :data-bar1="graphData.y1" :others="graphData.other" :title="'工艺不合数量'" />
      </div>
    </div>
  </div>
</template>
<script setup lang="ts">
  import { ref, reactive, onMounted, watch, onUnmounted, computed } from 'vue';
  import { ElMessage, ElMessageBox, ElNotification } from 'element-plus';
  import { ArrowDown } from '@element-plus/icons-vue';
  import dayjs from 'dayjs';
  import GraphBarLine from './components/GraphBarLine.vue';
  import { rateApi } from '/@/api/report/processParameter/index';

  const tabTextMap: Record<string, string> = {
    tcm2280: '酸轧2280',
    cal1630: '连退1630',
    cal2150: '连退2150',
    cgl1870: '镀锌1870',
  };

  type ActiveTabKey = keyof typeof tabTextMap | string;
  const activeTab = ref<'tcm2280' | 'cal1630' | 'cal2150' | 'cgl1870'>('tcm2280');
  const curLine = computed(() => {
    return tabTextMap[activeTab.value as ActiveTabKey] ?? '酸轧2280';
  });
  const handleCommand = (command: 'tcm2280' | 'cal1630' | 'cal2150' | 'cgl1870') => {
    activeTab.value = command;
    fetchData();
  };

  const searchForm = reactive({
    startDate: '',
    endDate: '',
  });

  // 搜索方法
  const handleSearch = async () => {
    fetchData();
  };

  // 重置方法
  const handleReset = async () => {
    searchForm.startDate = '';
    searchForm.endDate = '';
    fetchData();
  };

  const spanFunc = ({ row, rowIndex, columnIndex }: { row: any; rowIndex: number; columnIndex: number }) => {
    if (columnIndex === 0) {
      // 假设根据row.area判断是否相同区域
      if (rowIndex === 0 || row.area !== tableData.value[rowIndex - 1]?.area) {
        let rowspan = 1;
        // 计算连续相同区域的行数
        while (rowIndex + rowspan < tableData.value.length && tableData.value[rowIndex + rowspan].area === row.area) {
          rowspan++;
        }
        return { rowspan, colspan: 1 };
      } else {
        return { rowspan: 0, colspan: 0 };
      }
    }
    return { rowspan: 1, colspan: 1 };
  };

  const tableData = ref([
    // 入口段
    {
      area: '入口段',
      item: '拉矫机延伸率',
      lower: '0%',
      upper: '4%',
      coilCount: '',
      unpassCount: '',
      unpassRate: '',
    },
    {
      area: '酸洗段',
      item: '酸洗速度',
      lower: '',
      upper: '',
      coilCount: '',
      unpassCount: '',
      unpassRate: '',
    },
    {
      area: '酸洗段',
      item: '1#酸槽温度',
      lower: '',
      upper: '',
      coilCount: '',
      unpassCount: '',
      unpassRate: '',
    },
    {
      area: '酸洗段',
      item: '2#酸槽温度',
      lower: '',
      upper: '',
      coilCount: '',
      unpassCount: '',
      unpassRate: '',
    },
    {
      area: '酸洗段',
      item: '3#酸槽温度',
      lower: '',
      upper: '',
      coilCount: '',
      unpassCount: '',
      unpassRate: '',
    },

    // 酸洗段
    {
      area: '酸洗段',
      item: '1#游离酸浓度',
      lower: '40g/L',
      upper: '',
      coilCount: '',
      unpassCount: '',
      unpassRate: '',
    },
    {
      area: '酸洗段',
      item: '铁离子浓度',
      lower: '120g/L',
      upper: '',
      coilCount: '',
      unpassCount: '',
      unpassRate: '',
    },
    {
      area: '酸洗段',
      item: '3#游离酸浓度',
      lower: '160g/L',
      upper: '',
      coilCount: '',
      unpassCount: '',
      unpassRate: '',
    },
    {
      area: '酸洗段',
      item: '铁离子浓度',
      lower: '30g/L',
      upper: '',
      coilCount: '',
      unpassCount: '',
      unpassRate: '',
    },
    {
      area: '酸洗段',
      item: '4#漂洗槽PH值',
      lower: '',
      upper: '',
      coilCount: '',
      unpassCount: '',
      unpassRate: '',
    },
    {
      area: '酸洗段',
      item: '烘干机温度',
      lower: '126℃',
      upper: '130℃',
      coilCount: '',
      unpassCount: '',
      unpassRate: '',
    },
    // 轧机段
    {
      area: '轧机段',
      item: '轧制速度',
      lower: '',
      upper: '',
      coilCount: '',
      unpassCount: '',
      unpassRate: '',
    },
    {
      area: '轧机段',
      item: '1S乳化液浓度（奎克）',
      lower: '1.60%',
      upper: '2%',
      coilCount: '',
      unpassCount: '',
      unpassRate: '',
    },
    {
      area: '轧机段',
      item: '2S乳化液浓度（奎克）',
      lower: '1.60%',
      upper: '2%',
      coilCount: '',
      unpassCount: '',
      unpassRate: '',
    },
    {
      area: '轧机段',
      item: '3S乳化液浓度（奎克）',
      lower: '0.30%',
      upper: '0.50%',
      coilCount: '',
      unpassCount: '',
      unpassRate: '',
    },
    {
      area: '轧机段',
      item: '乳化液1#箱温度',
      lower: '50',
      upper: '60',
      coilCount: '',
      unpassCount: '',
      unpassRate: '',
    },
    {
      area: '轧机段',
      item: '乳化液2#箱温度',
      lower: '50',
      upper: '60',
      coilCount: '',
      unpassCount: '',
      unpassRate: '',
    },
    {
      area: '轧机段',
      item: '乳化液3#箱温度',
      lower: '50',
      upper: '60',
      coilCount: '',
      unpassCount: '',
      unpassRate: '',
    },
    {
      area: '轧机段',
      item: '杂油',
      lower: '',
      upper: '',
      coilCount: '',
      unpassCount: '',
      unpassRate: '',
    },
    {
      area: '轧机段',
      item: '1#乳化液喷射梁压力',
      lower: '',
      upper: '',
      coilCount: '',
      unpassCount: '',
      unpassRate: '',
    },
    {
      area: '轧机段',
      item: '2#乳化液喷射梁压力',
      lower: '',
      upper: '',
      coilCount: '',
      unpassCount: '',
      unpassRate: '',
    },
    {
      area: '轧机段',
      item: '3#乳化液喷射梁压力',
      lower: '',
      upper: '',
      coilCount: '',
      unpassCount: '',
      unpassRate: '',
    },
    {
      area: '轧机段',
      item: '4#乳化液喷射梁压力',
      lower: '',
      upper: '',
      coilCount: '',
      unpassCount: '',
      unpassRate: '',
    },
    {
      area: '轧机段',
      item: '5#乳化液喷射梁压力',
      lower: '',
      upper: '',
      coilCount: '',
      unpassCount: '',
      unpassRate: '',
    },
    {
      area: '轧机段',
      item: '带钢表面反射率',
      lower: '',
      upper: '',
      coilCount: '',
      unpassCount: '',
      unpassRate: '',
    },
  ]);

  interface GraphData {
    x: string[];
    y1: number[];
    y2?: number[];
    other?: any[];
  }

  const graphData = reactive<GraphData>({
    x: [],
    y1: [],
    other: [],
  });

  const fetchData = async () => {
    const params = {
      ...searchForm,
      lineCode: activeTab.value,
    };
    try {
      const res = await rateApi.overviewList(params);
      let x: string[] = [],
        y1: number[] = [],
        other: any[] = [];
      tableData.value = res.data.data;
      const res2 = await rateApi.overviewBar(params);
      res2.data.data.forEach((item: any) => {
        x.push(item.crew);
        y1.push(item.failNum);
        other.push(item.reasons);
      });
      graphData.x = x;
      graphData.y1 = y1;
      graphData.other = other;
      ElMessage.success('加载成功');
    } catch (error) {
      ElMessage.error('加载失败');
    }
  };
  onMounted(() => {
    searchForm.startDate = dayjs().subtract(6, 'day').format('YYYY-MM-DD');
    searchForm.endDate = dayjs().format('YYYY-MM-DD');
    fetchData();
  });
</script>
<style lang="less" scoped>
  @import '/src/views/reportforms/customized/processParameter/deepElement.css';

  .container {
    width: 99.5%;
    position: relative;
    min-height: 100vh;
    margin-bottom: 1vh;
    padding: 20px;
    background: url(/@/assets/images/home/body-bg.jpg) no-repeat;
  }

  .el-dropdown-link {
    cursor: pointer;
    color: var(--el-color-primary);
    display: flex;
    align-items: center;
    font-size: 16px;
  }

  .main-container {
    display: flex;
    flex-wrap: nowrap;
    gap: 1vw;
  }

  .table-container {
    width: 70%;
    padding: 20px;
    border-radius: 8px;
    background: linear-gradient(180deg, rgba(11, 47, 106, 0.28), rgba(11, 47, 106, 0.18));
    border: 1px solid rgba(207, 227, 255, 0.18);
    box-shadow:
      0 8px 24px rgba(11, 47, 106, 0.35),
      inset 0 0 0 1px rgba(255, 255, 255, 0.04);
  }

  :deep(.el-table--border td) {
    border-top: 1px solid #ebeef5;
  }
  :deep(.el-table--border th.gutter:last-of-type) {
    border-top: 1px solid #ebeef5;
  }

  .graph-container {
    // width: 30%;
    display: flex;
    flex: 1;
    height: 30vh;
  }
</style>
